<template>
  <el-dialog
      :title="'修改'+title"
      :visible.sync="dialogVisible"
      :width="width"
      :close-on-click-modal="false"
      top="0">
    <GeneralForm ref="updateForm" v-bind="params"></GeneralForm>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelClick()">取 消</el-button>
      <el-button type="primary" @click="confirmClick()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {formDataTransform} from "@/utils/GeneralTable";
export default {
  name: "UpdateDialog",
  components: {
    GeneralForm: () => import('../FormComponent/GeneralForm')
  },
  props: {
    // 弹出框标题
    title: {
      type: String,
      default() {
        return ''
      }
    },
    // 修改api
    editFunction: {
      type: Function,
      default() {
        return () => Promise.resolve();
      }
    },
    // 表单配置数据
    formOption: {
      type: Object,
      default() {
        return {}
      }
    },
    // 弹出窗宽度
    width: {
      type: String,
      default() {
        return ''
      }
    },
  },
  data() {
    return {
      dialogVisible: false,
      params: {}
    }
  },
  methods: {
    // 提供给父级调用的显示函数
    show(row) {
      // 赋值数据进入弹窗
      for (let item in this.params.formObject) {
        this.params.formObject[item]=row[item]
      }
      this.dialogVisible = true
      // // 等待弹出对话框渲染完毕
      this.$nextTick(() => {
        this.$refs.updateForm.setData(true)
      })
    },
    // 取消按钮点击
    cancelClick() {
      this.dialogVisible = false
    },
    // 确认按钮点击
    confirmClick() {
      // 验证表单
      this.$refs.updateForm.getValidate((valid)=> {
        if (valid) {
          // 去除值为空的属性
          let param = this.$refs.updateForm.getFormData()
          for (let item in param){
            if (param[item] === '') delete param[item]
          }
          // 调用添加api
          this.editFunction(param).then(() => {
            this.$notify({
              type: 'success',
              title: '成功',
              message: '修改' + this.title + '成功'
            })
            this.$refs.updateForm.clearData()
            // 传递事件结果
            this.$emit('updateSuccessEvent')
          }).catch(error => {
            this.$notify({
              type: 'error',
              title: '失败',
              message: '修改' + this.title + '失败\n' + error.msg
            })
            console.error(error)
            // 传递事件结果
            this.$emit('updateErrorEvent')
          })
          this.dialogVisible = false
        }
      })
    },
    // 添加表单数据
    addFormData(data) {
      this.$refs.updateForm.addFormData(data)
    }
  },
  created() {
    // 转换数据格式
    this.formOption && (this.params = formDataTransform(this.formOption))
  },
  watch: {
    // 动态监听list数据变化
    formOption:{
      handler() {
        this.params = formDataTransform(this.formOption)
      },
      deep: true
    }
  }
}
</script>

<style>
/*设置最大高度*/
  .el-dialog {
    max-height: 90vh;
    overflow: auto;
    margin-top: 0;
  }
/*对话框居中*/
  .el-dialog__wrapper {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
  }
/*对话框头部固定*/
  .el-dialog__header{
    background: white;
    z-index: 10;
    top: 0;
    position: sticky;
    border-bottom: 1px solid #e8eaec;
  }
/*对话框尾部固定*/
  .el-dialog__footer {
    background: white;
    z-index: 10;
    bottom: 0;
    position: sticky;
    border-top: 1px solid #e8eaec;
  }
</style>
